<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>

<template>
  <div>
    <div class="home">
      <Row :gutter="10">
        <!-- 左半部分 -->
        <Col :lg="24" :xl="8">
          <Row :gutter="10">
            <Col :lg="12" :style="{marginBottom: '10px'}" :xl="24">
              <!-- 管理员卡片 -->
              <Card>
                <Row class="user-info" type="flex">
                  <Col span="8">
                    <Row align="middle" class-name="made-child-con-middle" type="flex">
                      <img :src="avatarPath" class="avator-img"/>
                    </Row>
                  </Col>
                  <Col span="16" style="padding-left:6px;">
                    <Row align="middle" class-name="made-child-con-middle" type="flex">
                      <div>
                        <b class="card-user-info-name">{{ username }}</b><br>
                        <span>您好,</span><span class="light"> 教师成果管理系统 </span><span>欢迎您的使用</span>
                      </div>
                    </Row>
                  </Col>
                </Row>
                <div class="line-gray"></div>
                <Row class="margin-top-8">
                  <Col span="8">
                    <p class="notwrap">本管理系统归属于:</p>
                  </Col>
                  <Col class="padding-left-8" span="16">{{ City }}</Col>
                </Row>
              </Card>
            </Col>
            <Col :lg="12" :xl="24" style="margin-bottom: 10px;">
              <!-- 学校说明-->
              <Card>
                <p slot="title">
                  <Icon size="20" style="margin-right:5px" type="md-book"/>
                  <a target="_blank"> 教师成果管理系统 </a>
                </p>
                <p slot="extra">
                  <a href="https://www.ss.pku.edu.cn/" target="_blank">北京大学-软件与微电子学院</a>
                </p>
                <div style="height: 268px;">
                  <Timeline>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="ios-school"></Icon>
                      <a href="https://www.ss.pku.edu.cn/" target="_blank">学院简介</a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#2d8cf0" type="md-people"></Icon>
                      <a href="https://www.ss.pku.edu.cn/education/" target="_blank">教育教学</a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#f4364c" type="logo-buffer"></Icon>
                      <a href="https://www.ss.pku.edu.cn/student/" target="_blank">学生天地</a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#19be6b" type="md-cash"></Icon>
                      <a href="https://www.ss.pku.edu.cn/admission/" target="_blank">招生信息</a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#57a3f3" type="ios-loading"></Icon>
                      loading....
                    </TimelineItem>
                  </Timeline>
                </div>
              </Card>
            </Col>
          </Row>
        </Col>
        <!-- 右部分 -->
        <Col :lg="24" :xl="16">
          <Row>
            <Col :lg="24" :xl="12" style="padding: 0 5px 10px 0;">
              <!-- 科研管理系统说明 -->
              <Card>
                <p slot="title" style="overflow:visible">
                  <a target="_blank">
                    <Icon size="20" style="margin-right:5px" type="ios-star"></Icon>
                    <Badge>科研管理系统说明</Badge>
                  </a>
                </p>
                <div style="height:368px;overflow:auto">
                  <Timeline>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="ios-cloud-circle"></Icon>
                      <a>
                        <router-link :to="{path:'/research/achievement'}">成果管理</router-link>
                      </a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="ios-trophy"></Icon>
                      <a>
                        <router-link :to="{path:'/research/awardManagement'}">获奖管理</router-link>
                      </a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="ios-book"></Icon>
                      <a>
                        <router-link :to="{path:'/research/documentManagement'}">论文管理</router-link>
                      </a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="ios-paper"></Icon>
                      <a>
                        <router-link :to="{path:'/research/patentManagement'}">专利管理</router-link>
                      </a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="ios-document"></Icon>
                      <a>
                        <router-link :to="{path:'/research/fileManagement'}">文件管理</router-link>
                      </a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="ios-flask"></Icon>
                      <a>
                        <router-link :to="{path:'/research/subjectManagement'}">课题管理</router-link>
                      </a>
                    </TimelineItem>
                    <TimelineItem>
                      <Icon slot="dot" color="#fb7299" type="md-people"></Icon>
                      <a>
                        <router-link :to="{path:'/research/staffManagement'}">教工管理</router-link>
                      </a>
                    </TimelineItem>
                  </Timeline>
                  <Alert show-icon style="padding: 8px 8px 8px 36px;font-size:12px" type="warning">
                    温馨提示：APP模块开发中，如有错误，可以上报！若系统持续加载，请重新刷新页面！
                  </Alert>
                  <Alert style="padding: 8px 16px 8px 16px;font-size:12px">
                    敬请等待新功能.................................................
                  </Alert>
                </div>
              </Card>
            </Col>
            <Col :lg="24" :xl="12" style="padding: 0 0 10px 5px;">
              <div style="padding: 13px;background: #f8f8f9">
                <Card icon="ios-options" shadow style="width: 100%;" title="选项">
                  <CellGroup>
                    <Cell style="color:darkblue;" title="北京大学-软件与微电子学院"/>
                    <Cell title="计算机科学与技术"/>
                    <Cell title="电子信息"/>
                    <Cell title="金融科技"/>
                    <Divider size="small" style="color: #2db7f5">功能</Divider>
                    <Button ghost type="success" to="/sys/user-manage" long>用户管理</Button>
                    <Button ghost type="warning" to="/sys/department-manage" long style="margin: 10px 0px;">部门管理</Button>
                    <Button ghost type="error" to="/sys/role-manage" long>角色权限管理</Button>
                    <Cell disabled title="此消息为警示作用(不可操作)"/>
                  </CellGroup>
                </Card>
              </div>
            </Col>
          </Row>
        </Col>
      </Row>

    </div>
  </div>
</template>

<script>
import {
  ipInfo,
  getNotice
} from "@/api/index";
import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import infoCard from "./components/infoCard.vue";
import Cookies from "js-cookie";
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";

export default {
  name: "home",
  components: {
    visitVolume,
    visitSeparation,
    infoCard,
  },
  data() {
    return {
      count: {
        createUser: 496,
        visit: 3264,
        collection: 24389305,
        transfer: 39503498
      },
      City: "北京大学-软件与微电子学院",
      username: "",
    };
  },
  computed: {
    // 当前视图
    currNav() {
      return this.$store.state.app.currNav;
    },
    avatarPath() {
      return localStorage.avatorImgPath;
    }
  },
  methods: {
    init() {
      let userInfo = JSON.parse(Cookies.get("userInfo"));
      this.username = userInfo.nickname;
      ipInfo().then(res => {
        if (res.success) {
          this.city = res.result;
        }
      });
    },
    showNotice() {
      getNotice().then(res => {
        if (res.success) {
          if (!res.result) {
            return;
          }
          let data = res.result;
          if (
              data.open &&
              (data.title || data.content) &&
              data.position == "HOME"
          ) {
            this.$Notice.info({
              title: data.title,
              desc: data.content,
              duration: data.duration
            });
          }
        }
      });
    },
  },
  mounted() {
    this.init();
    // 通知
    let noticeFlag = "noticeShowed";
    let notice = Cookies.get(noticeFlag);
    if (notice != noticeFlag) {
      this.showNotice();
      Cookies.set(noticeFlag, noticeFlag);
    }
    // Gitalk
    var gitalk = new Gitalk({
      clientID: "a128de2dd7383614273a",
      clientSecret: "a77691ecb662a8303a6c686ae651ae035868da6e",
      repo: "xboot-comments",
      owner: "Exrick",
      admin: ["Exrick"],
      distractionFreeMode: false // 遮罩效果
    });

  }
};
</script>

